import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const navigatorStyle = style({
	position: 'relative',
	overflow: 'hidden',
});

export const ANIMATION_DURATION = 300;

export const navigatorPageStyle = style({
	position: 'absolute',
	left: '0',
	top: '0',
	right: '0',
	bottom: '0',
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	justifyContent: 'start',
	overflow: 'auto',
	background: vars.color.pageBackground,
	transition: `transform ${ANIMATION_DURATION}ms ease-out, filter ${ANIMATION_DURATION}ms ease-in`,
	transform: 'translateX(100%)',
});

globalStyle(`${navigatorPageStyle}.pushed`, {
	transform: 'translateX(0%)',
});

globalStyle(`${navigatorPageStyle}.pushed.inactive`, {
	transform: 'translateX(-20%)',
	filter: 'brightness(0.9)',
});
